<template>
	<div>
		<!-- 搜索框 -->
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="margin-left: 20px" type="primary" @click="handleSearchList()" size="small">查询搜索
				</el-button>
				<el-button style="margin-left: 15px" @click="reset()" size="small">重置</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="葵码编号：">
						<el-input v-model="listQuery.xrkCode" class="input-width" placeholder="请填写葵码编号"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名：">
						<el-input v-model="listQuery.realname" class="input-width" placeholder="请填写真实姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号：">
						<el-input v-model="listQuery.mobile" class="input-width" placeholder="请填写手机号"></el-input>
					</el-form-item>
					<el-form-item label="异常原因：">
						<el-select v-model="listQuery.type" class="input-width" placeholder="全部" clearable>
							<el-option v-for="item in skuList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态：">
						<el-radio-group v-model="listQuery.status">
							<el-radio :label="-1">处理中</el-radio>
							<el-radio :label="1">用户已处理</el-radio>
							<el-radio :label="2">通过</el-radio>
							<el-radio :label="3">驳回</el-radio>
							<el-radio :label="9">取消</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
		</el-card>

		<el-card class="filter-container" shadow="never">
			<div>
				<el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
					start-placeholder="开始月份" end-placeholder="结束月份" @change="timechange">
				</el-date-picker>
				<el-button style="margin-left: 30px" type="primary" @click="tableToExcel2('Order/listDownload')"
					size="small">列表数据导出</el-button>

			</div>
		</el-card>
		<div>
			<i class="el-icon-document"></i>
			<span>异常信息记录</span>
			<el-button style="margin-left: 20px" @click="addFn()" size="mini" type="primary">新增</el-button>
		</div>
		<el-table :data="tableData" stripe style="width: 100%">

			<el-table-column prop="xrkCode" label="葵码编号">
			</el-table-column>
			<el-table-column prop="realname" label="真实姓名">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号">
			</el-table-column>
			<el-table-column prop="ab_config.name" label="异常原因">
			</el-table-column>
			<el-table-column prop="statusText" label="状态 ">
			</el-table-column>
			<el-table-column prop="cMobile" label="常用联系手机号 ">
			</el-table-column>
			<el-table-column prop="addTime" label="时间 ">
			</el-table-column>
			<el-table-column align="center" label="操作" width="200">
				<template slot-scope="scope">
					<el-button size="mini" type="info" @click="addFn(scope.row)">查看</el-button>
					<!-- status 1 显示通过驳回    -1  取消 -->
					<el-button v-if="scope.row.status == 1" size="mini" type="primary" @click="edit_btn(scope.row,2)">通过
					</el-button>
					<el-button v-if="scope.row.status == 1" size="mini" type="info" @click="edit_btn(scope.row,3)">驳回
					</el-button>
					<el-button v-if="scope.row.status == -1" size="mini" type="danger" @click="handleDelete(scope.row)">
						取消</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 商品编辑栏 -->
		<el-dialog :title="form.abnormalRecordID ? '编辑' : '新增'" :visible.sync="dialogVisible" width="70%"
			:append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="130px" :rules="rules">

				<el-form-item label="葵码编号">
					<el-autocomplete :disabled="isDisable" v-model="xrkCode"  style="width: 50%"
						:fetch-suggestions="findgoodsFn" :placeholder="'请输入葵码编号进行搜索'" @select="handleSelect">
					</el-autocomplete>
				</el-form-item>
				<el-form-item label="真实姓名">
					<el-input :disabled="true" v-model="form.realname" style="width: 50%" :placeholder="'请输入真实姓名'">
					</el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input :disabled="true" type="text" maxlength="11" v-model="form.mobile" style="width: 50%"
						:placeholder="'请输入手机号'"></el-input>
				</el-form-item>

        <el-form-item label="常用联系方式">
          <el-input :disabled="false" type="text" maxlength="11" v-model="form.cMobile" style="width: 50%"
                    :placeholder="'请输入常用联系方式'"></el-input>
        </el-form-item>

				<!-- 异常原因id -->
				<el-form-item label="异常原因">
					<el-select :disabled="isDisable" v-model="form.type" placeholder="请选择异常原因">
						<el-option v-for="item in skuList" :key="item.id" :label="item.name" :value="item.id">
							<span style="float: left">{{ item.name }}</span>

						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="备注">
					<el-input :disabled="isDisable" type="textarea" :rows="3" v-model="form.content" style="width: 50%;"
						:placeholder="'请输入备注'"></el-input>
				</el-form-item>


			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" :disabled="isDisable" @click="submit('form')">确 定</el-button>
			</span>
		</el-dialog>
		<div class="margin-top-15" style="text-align: center; padding: 0 50px 50px 50px">
			<Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
				@on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
		</div>
	</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		data() {
			return {
				time: "",
				beginTime: "",
				endTime: "",
				tableData: [],
				listQuery: {},
				form: {},
				isDisable: false,
				dialogVisible: false,

				tableShow: {
					currentPage: 1,
					pageSize: 10,
					listCount: 0,
				},
				rules: {
					xrkCode: [{
						required: true,
						message: '请输入葵码编号',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],

				},
				skuList: [], //异常原因列表
				xrkCode:"",
			}
		},
		created() {
			this.tableShow.currentPage = parseInt(sessionStorage.getItem("page")) || 1;
			this.tableShow.pageSize = parseInt(sessionStorage.getItem("size")) || 10;
			axios.get("AbnormalConfig/index").then((response) => {
				let res = response.data;
				this.skuList = res.data.list;

			});
			this.initPage();
		},
		methods: {
			handleSelect(val) { //val

				this.xrkCode=val.xrkCode;
				this.form.xrkCode=val.xrkcode;

				this.form.mobile = val.mobile;
				this.form.realname = val.trueName;
			},
			//设置为拼团商品时 通过商品名称进行搜索
			findgoodsFn(xrkcode, callback) {
				if (xrkcode != null && xrkcode.length > 0) {
					let obj = {
						page: 1,
						size: 999,
					};
					obj["xrkcode"] = xrkcode;
					axios.get("ClientUser/index", obj).then((response) => {
						let res = response.data;
						let list = [];
						if (res.code === 1) {
							for (let i in res.data.list) {
								list.push({
									value: res.data.list[i].trueName+'   '+res.data.list[i].xrkCode+'   '+res.data.list[i].mobile,
									trueName:res.data.list[i].trueName,
									mobile: res.data.list[i].mobile,
									xrkcode:res.data.list[i].xrkCode
								});
							}
							callback(list);
						} else {
							this.$message({
								message: res.msg,
								type: "warning",
							});
						}
					});
				}
			},

			timechange(val) {
				if (val) {
					this.beginTime = val[0];
					this.endTime = val[1];
				}
			},

			tableToExcel2(api) {
				const elink = document.createElement("a");
				var urlHead =
					"http://collectapi.jujingame.com/backstage/AbnormalRecord/listDownload?acces_token=s4fnds5pms86rttb";
				elink.style.display = "none";
				elink.href = urlHead + "&beginTime=" + this.beginTime + "&endTime=" + this.endTime;
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			},
			reset() {
				this.tableShow = {
					currentPage: 1,
					pageSize: 10,
					listCount: 0,
				};

				this.listQuery = {};
				this.initPage();
			},
			changePage(page) {
				this.tableShow.currentPage = page;
				sessionStorage.setItem("page", this.tableShow.currentPage);
				this.initPage(this.multipleSelection);
			},
			changeSize(size) {
				this.tableShow.pageSize = size;
				sessionStorage.setItem("size", this.tableShow.currentPage);
				this.initPage(this.multipleSelection);
			},
			initPage(obj) {
				let that = this;
				if (this.tableShow.currentPage == 1) {
					this.tableData = [];
				}
				if (!obj) {
					var obj = {};
				}
				obj['page'] = this.tableShow.currentPage;
				obj['size'] = this.tableShow.pageSize;

				axios.get("AbnormalRecord/index", {
					params: obj
				}).then(function(response) {
					let res = response.data;
					if (res.code === 1) {
						that.tableData = res.data.list;
						that.tableShow.listCount = res.data.count;
					} else {
						that.$Message.error(res.msg);
					}
				});
			},
			handleSearchList() {
				this.initPage(this.listQuery);
			},
			addFn: function(form) {
				if (form) {
					console.log(form)
					this.form = form;
					this.isDisable = true;
				} else {
					this.form = {};
					this.isDisable = false;
				}
				this.dialogVisible = true;
			},
			handleResetSearch() {
				this.listQuery = {};
				this.initPage();
			},
			edit_btn(row, status) {
				let vm = this;
				axios
					.post("AbnormalRecord/dataDeal", {
						abnormalRecordID: row.abnormalRecordID,
						status
					})
					.then((res) => {
						if (res.data.code === 1) {
							vm.$Message.success(res.data.msg);
							//初始化
							vm.initPage();
						} else {
							vm.$Message.error(res.data.msg);
						}
					});
			},
			handleClose() {
				this.form = {};
				this.dialogVisible = false;
				this.$refs["form"].resetFields();
			},
			handleDelete(row) {
				let vm = this;
				this.$confirm("确定要删除么?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(function(response) {
					axios
						.post("AbnormalRecord/cancel", {
							abnormalRecordID: row.abnormalRecordID,
						})
						.then((res) => {
							if (res.data.code === 1) {
								vm.$Message.success(res.data.msg);
								//初始化
								vm.initPage();
							} else {
								vm.$Message.error(res.data.msg);
							}
						});
				});
			},
			submit(formName) {
				this.isDisable = true;
				var url = 'AbnormalRecord/add';
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post(url, this.form).then((response) => {
							setTimeout(() => {
								this.isDisable = false;
							}, 1000);
							if (response.data.code === 1) {
								this.$Message.success(response.data.msg);
								this.handleClose();
								this.initPage();
							} else {
								this.$message({
									message: response.data.msg,
									type: "warning",
								});
							}
						});
					} else {
						setTimeout(() => {
							this.isDisable = false;
						}, 1000);
						return false;
					}
				});
			},
		}
	}
</script>
